<!-- 关于我们 -->
<template>
  <div class="abb-page">
    <div class="display-flex">
      <div class="flex-1">
        <img
          src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/userImg/logo1658470349386.png"
        />
      </div>
    </div>
    <p class="fz32 mb10">
      <span class="henxinase ab"></span><br />
      关于联桩
    </p>

    <div class="dingtubjer">
      <img class="w100 h100 imgjz" :src="banner" v-if="banner" />
      <div class="jjhhserr vertical-center sz" @click="photoShowModaler = true">
        +点击修改顶图
      </div>
    </div>

    <p class="fz32 mb10">
      <n-input
        v-model:value="videourl"
        placeholder="输入相关视频地址"
        size="medium"
        class="fz16"
        @blur="shujueliu"
      />
    </p>
    <div class="mt20 fz22">
      <n-input
        class="fz22 br0"
        placeholder=""
        type="textarea"
        size="medium"
        v-model:value="introduce"
        clearable
        @blur="shujueer"
      ></n-input>
    </div>

    <div class="mt60 fz26">我们的产品</div>
    <div class="mt30 jdfdsrreer">
      <div class="nkjhhbjwerw" v-for="(item, idx) in xwList" :key="idx">
        <img :src="item.fm" class="jjnnxeertw" />
        <p class="pd pt5 fz18">{{ item.title }}</p>
        <div class="jhnkjxerrw vertical-center">
          <div>
            <i
              class="iconfont dx-edit sz cf fz40"
              @click="bianjicp(item.id)"
            ></i>
            <i
              class="iconfont dx-shanchu sz cf fz40 ml20"
              @click="delcp(item.id, 1)"
            ></i>
          </div>
        </div>
      </div>
      <div
        class="nkjhhbjwerw vertical-center sz"
        @click="hf('EdutProductGuide')"
      >
        <span class="fz20 z9">+添加交流充电桩</span>
      </div>
    </div>

    <div class="mt60 fz26">联系我们</div>
    <div class="mt20">
      <abbskip
        type="10"
        puptitle="联系我们"
        className="aa"
        :showintroduce="true"
      ></abbskip>
    </div>

    <n-modal
      v-model:show="photoShowModaler"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>上传banner</div>
      </template>
      <div>
        <photoGallery @getImg="getImger" types="关于我们"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturler"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang='ts' setup>
import { nextTick, ref } from "vue";
import { dxget, dialog, dxdel, dxpost, hf } from "../../../util";
import photoGallery from "../../../components/util/photoGallery";
import abbskip from "../pressCenter/components/abbskip.vue";
const banner = ref();
const photoShowModaler = ref(false);
const title = ref("");
const introduce = ref("");
const case1 = ref("");
const case2 = ref("");
const videourl = ref("");
const jhnnerr = ref(0);
const xwList = ref(); // 交流充电桩
const shujueer = () => {
  upDataHome({ introduce: introduce.value });
};
const shujuesan = () => {
  upDataHome({ title: title.value });
};
const shujuesi = () => {
  upDataHome({ case1: case1.value });
};

const shujuewu = () => {
  upDataHome({ case2: case2.value });
};
const shujueliu = () => {
  upDataHome({ videourl: videourl.value });
};
const upDataHome = async (cs) => {
  const { errno }: any = await dxpost(
    "abb/abbhomeBj",
    {
      id: 7,
      ...cs,
    },
    "put"
  );
  if (errno == 0) {
    window.$message.success("修改成功！");
  }
};

let videUrler = "";
const getImger = (data) => {
  videUrler = data;
};

const geturler = () => {
  photoShowModaler.value = false;
  banner.value = videUrler;
  upDataHome({ banner: videUrler });
};

const initData = async () => {
  const { data }: any = await dxget("abb/abbhomeBj", { id: 7 });
  banner.value = data.banner;
  introduce.value = data.introduce;
  title.value = data.title;
  introduce.value = data.introduce;
  case1.value = data.case1;
};

const getxw = async (type) => {
  const { data }: any = await dxget("abb/abbproduct", {
    dxleujne: type,
  });
  if (type == 1) {
    xwList.value = data;
  }
};
const bianjicp = (id) => {
  hf("EdutProductGuide", { id });
};
const delcp = async (id, ty) => {
  const tyoew = await dialog("确认删除该产品嘛？删除后无法恢复");
  if (tyoew == 1) {
    await dxdel("abb/abbproduct", { id });
    getxw(ty);
  }
};
getxw(1);
initData();
</script>
 <style scoped>
.dingtubjer {
  height: 445px;
  background: #f8f8f8;
  position: relative;
}
.jjhhserr {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  font-size: 40px;
  color: #f8f8f8;
  display: none;
}
.dsfsdrtrere {
  height: 600px;
}
.dingtubjer:hover .jjhhserr {
  display: flex;
}
.jdfdsrreer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.nkjhhbjwerw {
  height: 293px;
  background: #fafafa;
  position: relative;
}
.jjnnxeertw {
  height: 223px;
  object-fit: cover;
  width: 100%;
}
.jhnkjxerrw,
.jjnjhwerrwe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.nkjhhbjwerw:hover .jhnkjxerrw {
  display: flex;
}
.jkjjnkderr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.jjhihweertrw {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.tijnwerrwe {
  height: 55px;
}
.jjhnjsfm {
  height: 223px;
  background: #f8f8f8;
  position: relative;
}
.jjhnjsfm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jjhnjsfm:hover .jjnjhwerrwe {
  display: flex;
}

.fdsferw {
  background: #fafafa;
}
.tm-text {
  display: inline-block;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  position: relative;
  top: -12px;
  font-size: 16px;
}
</style>